<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8'>
	<title>邢栋的个人网页</title>
	<link rel="icon" type="image/x-ico" href="favicon.ico">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
	<script>/*@cc_on window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
	<meta name="description" content="邢栋的个人网页">
	<meta name="author" content="邢栋">
</head>
<script src="./clock/getnow.js"></script>

<body onload="getnow()" ontouchstart>
	<style>
		html {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			text-rendering: optimizeLegibility;
		}

		@media(prefers-color-scheme:dark) {
			body {
				background-color: #111114;
			}

			p,
			small {
				color: white;
			}

			a {
				color: orange;
			}
		}

		@media(prefers-color-scheme:light) {
			body {
				background-color: #E9FDFF;
			}

			p,
			small {
				color: black;
			}

			a {
				color: blue;
			}
		}

		h1 {
			color: #f35626;
			animation: hue 5s infinite linear;
			text-align: center;
		}

		@keyframes hue {
			from {
				-webkit-filter: hue-rotate(0deg);
			}

			to {
				-webkit-filter: hue-rotate(360deg);
			}
		}

		h1:hover {
			font-size: 60px;
		}


		#menu {
			display: inline-block;
		}

		#menu #list {
			max-height: 0;
			transition: max-height 0.25s ease;
			overflow: hidden;
			background: rgba(208, 228, 254, 0);
			width: 80px;
			margin: 0;
			padding: 0;
			text-align: center;
		}

		#menu:hover #list {
			max-height: 800px;
			/*⬆列表长*/
			transition: max-height 0.25s ease;
			width: 100px;
			/*⬆列表宽*/
			margin: 0;
			padding: 0;
			background-color: rgba(208, 228, 254, 0);
		}

		#menu:hover .button {
			background-color: orangered;
		}

		.button {
			height: 32px;
			/*⬆按钮长*/
			width: 100px;
			/*⬆按钮宽*/
			border-radius: 10px;
			padding-left: 0px;
			padding-right: 0px;
			line-height: 32px;
			background: plum;
			color: white;
			text-align: center;
		}

		button {
			background: yellowgreen;
			color: blueviolet;
			border-radius: 100px;
		}

		strong {
			color: #f35626;
			animation: hue 5s infinite linear;
		}

		strong:hover {
			cursor: pointer;
		}


		@keyframes hue {
			from {
				-webkit-filter: hue-rotate(0deg);
			}

			to {
				-webkit-filter: hue-rotate(360deg);
			}
		}

		img {
			border-radius: 30px;
			width: auto;
			height: auto;
		}

		a {
			text-decoration-line: none;
			line-height: 30px;
		}

		a:hover {
			text-decoration-line: underline;
			font-weight: bold;
		}
	</style>
	<div id="menu">
		<div class="button">自制网页</div>
		<ul id="list">
			<a href="./clock">钟<br></a>
			<a href="ShiningText.html">高亮文字<br></a>
			<a href="NeonText.html">发光文字<br></a>
			<a href="taichi.html">旋转太极<br></a>
			<a href="4.html">正方体旋转<br></a>
			<a href="3.html">python简介<br></a>
			<a href="2.html">小猫笑脸动画<br></a>
			<a href="1.html">3D效果<br></a>
			<a href="drag_game.html">拖动小游戏<br></a>
			<a href="hack.html">黑客帝国雨<br></a>
			<a href="jokes.html">三个小笑话<br></a>
			<a href="search.html">搜索<br></a>
			<a href="./converter">单位转换器<br></a>
			<a href="./bmi">BMI计算器<br></a>
			<a href="./calc">简易计算器<br></a>
			<a href="./world-map">世界地图<br></a>
			<a href="./jttl">鸡兔同笼<br></a>
		</ul>
	</div>
	<div id="menu">
		<div class="button">自制壁纸</div>
		<ul id="list">
			<a href="1.png">壁纸1<br></a>
			<a href="2.png">壁纸2<br></a>
			<a href="3.png">壁纸3<br></a>
			<a href="4.jpeg">壁纸4<br></a>
			<a href="5.jpeg">壁纸5<br></a>
			<a href="6.jpeg">壁纸6<br></a>
			<a href="7.jpeg">壁纸7<br></a>
		</ul>
	</div>
	<div id="menu">
		<div class="button">自制表情包</div>
		<ul id="list">
			<a href="变脸.gif">变脸</a>
		</ul>
	</div>
	<div id="menu">
		<div class="button">显微镜观察</div>
		<ul id="list">
			<a href="111111111.jpeg">瑜伽垫<br></a>
			<a href="222222222.jpeg">绿色小飞虫<br></a>
			<a href="444444444.jpg">黑色小飞虫<br></a>
			<a href="333333333.jpeg">耳屎<br></a>
		</ul>
	</div>
	<div id="menu">
		<div class="button">背景图片</div>
		<ul id="list">
			<script>
				function bg_image1() {
					document.body.style.backgroundImage = "url(bg-image1)"
				}


				function bg_image2() {
					document.body.style.backgroundImage = "url(bg-image2)"
				}

				function bg_image3() {
					document.body.style.backgroundImage = "url(bg-image3)"
				}

				function bg_image4() {
					document.body.style.backgroundImage = "url(bg-image4)"
				}
			</script>
			<noscript>你的浏览器不支持javascript！</noscript>
			<button type="button" onclick="bg_image1()">壁纸1</button>
			<p></p>
			<button type="button" onclick="bg_image2()">壁纸2</button>
			<p></p>
			<button type="button" onclick="bg_image3()">壁纸3</button>
			<p></p>
			<button type="button" onclick="bg_image4()">壁纸4</button>
		</ul>
	</div>
	<div id="menu">
		<div class="button">更多信息</div>
		<ul id="list">
			<a href="qrcode.png">二维码<br></a>
			<a href="https://github.com/xclala/xclala.github.io">
				<svg height="32" viewBox="0 0 16 16" width="32" style="background-color: whitesmoke;">
					<path fill-rule="evenodd"
						d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
					</path>
				</svg>
			</a>
		</ul>
	</div>
	<h1>邢栋的个人网页</h1>
	<img src="头像.jpg">
	<p>大家好，我是邢栋！我喜欢编程，我基本上是自学的。请大家多多关照😊 我编了一些网页，上面是我认为比较好的作品的链接，和别的琐碎的东西。</p>
	<a href="./clock"><strong id="nowspan"></strong><br></a>
	<script>
		const BACKGROUNDCOLOR = ['#111114', 'whitesmoke', '#E9FDFF']
		const TEXTCOLOR = ['white', 'black', 'black']
		const LINKCOLOR = ['orange', 'blue', 'blue']
		let c = 0
		document.getElementsByTagName("h1")[0].onclick = function () {
			document.body.style.backgroundColor = BACKGROUNDCOLOR[c % 3]
			document.getElementsByTagName("small")[0].style.color = TEXTCOLOR[c % 3]
			let x = document.getElementsByTagName("p")
			for (let i = 0; i < x.length; i++) {
				x[i].style.color = TEXTCOLOR[c % 3]
			}
			let xx = document.getElementsByTagName("a")
			for (let i = 0; i < xx.length; i++) {
				xx[i].style.color = LINKCOLOR[c % 3]
			}
			c++
		}
	</script>
</body>

</html>